在某些情況下，我們會想取消元素的預設行為，例如 <a> 標籤的 href 屬性的這個行為，此時 .preventDefault()
就是一個非常好用的方法

<a class="menu" href="https://www.google.com" style="display: block;">Menu</a>

照著上面的結構會有一個 a 連結，連到 google 去，此時我想取消他這種預設的行為的話：

var el = document.querySelector('.menu');
el.addEventListener('click',function(e){
    e.preventDefault();
});

這個時候會發現無論怎麼點擊，都不會去到 google 了，因為 a 標籤的預設行為已經被我取消了

有時候我們也會想知道，我們目前點擊的元素位置或者元素是什麼，假設以下面的 HTML 結構:

<div class="header">
    <ul>
        <li>
            <a href=""#>123</a>
        </li>
    </ul>
</div>

如果我們綁定一個點擊事件:

var el = document.querySelector('.header');
el.addEventListener('click',function(){});

這時候我們可以對 function 內一樣帶 e 這個參數，指的是事件本身，使用 .target 這個方法，我們可以知道元素以及內容:

el.addEventListener('click',function(e){
    e.target
    // 我們可以在 console 查看自己點擊到的元素內容是什麼
    console.log(e.target);
});

不妨可以再多加一點 css 把距離推開來就能知道其差異性，除了 .target 這個方法，我們還可以更準確的知道節點的元素，這時候可以在後面多加 .nodeName :

el.addEventListener('click',function(e){
    console.log(e.target.nodeName);
});

這時候我們就能抓出節點的位置了，不妨試試看吧